@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/store/store.css')}}">
<style>
    body {
        background: #fff;
    }
</style>
@section('content')
@include('home.store.storeHeader')

<div class="main" id="store"  v-cloak>
    <div class="companyProfile">
        <div class="companyProfile_name">
            <span class="messageTitle">公司简介</span>
            <span class="messageTitle_2">Our profile</span>
            <span class="bottomTriangle"></span>
        </div>
        <div class="companyProfile_details">
            <div>
                <p class="title">@{{storeDetails.store_name}}</p>
                <p class="text">@{{storeDetails.description}}</p>
                <div class="lookDetail"><a :href="'{{route('home.store.storeSummary')}}?id='+storeId">查看简介</a></div>
            </div>
            <img :src="storeDetails.logo">
        </div>
    </div>
    <div class="companyPicture" v-if="storeImg.length>0">
        <div class="companyProfile_name">
            <span class="messageTitle">图片展示</span>
            <span class="messageTitle_2">Our pictures</span>
            <span class="bottomTriangle"></span>
        </div>
        <div class="companyPicture_details">
            <div>
                <el-carousel :interval="4000" type="card" arrow="always" height="220px" indicator-position="none">
                    <el-carousel-item v-for="item in storeImg" :key="item">
                        <a><img :src="item" alt="" style="width:100%;height:100%"></a>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
    <div class="companyServe" v-if="storeService.length>0">
        <div class="companyProfile_name">
            <span class="messageTitle">服务内容</span>
            <span class="messageTitle_2">service contents</span>
            <span class="bottomTriangle"></span>
        </div>
        <div class="companyServe_details">
            <div v-for="(item,index) in storeService" v-if="index<3"  @click="getServiceDetails(item.id)">
                <div class="companyServe_details_title">
                    <img :src="item.thumb" alt="">
                    <span>@{{item.title}}</span>
                </div>
                <div class="companyServe_details_main">
                    <p style="width: 295px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">服务详情：@{{item.content}}</p>
                    <span>
                        @{{item.summary}}
                    </span>
                    <div @click="getServiceDetails(item.id)">查看详情 ></div>
                </div>
            </div>
            <div class="aaa" v-if="storeService.length == 0 || !storeService" style="padding: 0;border: 0;width: 100%;display: flex;">
                <div class="noStore" style="width: 372px;margin-left: 41px;display: block;">
                    <div style="border-bottom: 1px dashed #707070;height: 184px;line-height: 184px;font-size: 16px;text-align: center;margin: 0 20px;">暂无更多服务</div>
                </div>
                <div class="noStore" style="width: 372px;margin-right: 41px;display: block;">
                    <div style="border-bottom: 1px dashed #707070;height: 184px;line-height: 184px;font-size: 16px;text-align: center;margin: 0 20px;">暂无更多服务</div>
                </div>
                <div class="noStore" style="width: 372px;margin-right: 0;display: block;">
                    <div style="border-bottom: 1px dashed #707070;height: 184px;line-height: 184px;font-size: 16px;text-align: center;margin: 0 20px;">暂无更多服务</div>
                </div>
            </div>
            <div class="aaa" v-if="storeService.length == 1" style="padding: 0;border: 0;width: 785px;display: flex;">
                <div class="noStore" style="width: 372px;margin-right: 41px;display: block;">
                    <div style="border-bottom: 1px dashed #707070;height: 184px;line-height: 184px;font-size: 16px;text-align: center;margin: 0 20px;">暂无更多服务</div>
                </div>
                <div class="noStore" style="width: 372px;margin-right: 0;display: block;">
                    <div style="border-bottom: 1px dashed #707070;height: 184px;line-height: 184px;font-size: 16px;text-align: center;margin: 0 20px;">暂无更多服务</div>
                </div>
            </div>
            <div class="aaa" v-if="storeService.length == 2" style="padding: 0;border: 0;width: 372px;display: flex;">
                <div class="noStore" style="width: 372px;margin-right: 0;display: block;">
                    <div style="border-bottom: 1px dashed #707070;height: 184px;line-height: 184px;font-size: 16px;text-align: center;margin: 0 20px;">暂无更多服务</div>
                </div>
            </div>
        </div>
        <style>
            .companyServe_details>div{

            }
        </style>
        <div class="companyCase_details_more" @click="getServeMore">查看更多 ></div>
    </div>
    <div class="companyCase" v-if="storeCase.length>0">
        <div class="companyProfile_name">
            <span class="messageTitle">案例展示</span>
            <span class="messageTitle_2">Case presentation</span>
            <span class="bottomTriangle"></span>
        </div>
        <div class="companyCase_details">
            <div class="companyCase_details_main">
                <div v-for="(item,index) in storeCase" v-if="index<3" @click="window.location.href = '{{ route('home.store.casesDetails') }}?id='+storeId+'&caseId='+item.id">
                    <img :src="item.thumb" alt="">
                    <div class="companyCase_details_right">
                        <span>@{{item.title}}</span>
                        <span>
                            案例详情：@{{item.content}}
                        </span>
                    </div>
                </div>
            </div>
            <div class="companyCase_details_more" @click="getCaseMore">查看更多 ></div>
        </div>
    </div>
    <div class="companyPartners" v-if="storePartners.length>0">
        <div class="companyProfile_name">
            <span class="messageTitle">合作伙伴</span>
            <span class="messageTitle_2">Partners</span>
            <span class="bottomTriangle"></span>
        </div>
        <div class="companyPartners_details">
            <!-- <div v-for="(item,index) in storePartners">
                <img :src="item" alt="">
            </div> -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div v-for="(item,index) in storePartners"
                         class="swiper-slide" :style="{backgroundImage:'url('+item+')'}"></div>
                </div>
            </div>
        </div>
        <style>
            .companyPartners_details .swiper-slide{
                background-repeat: no-repeat;
                background-size: 100% auto;
            }
        </style>
    </div>
    <div class="companyTransaction">
        <div class="companyProfile_name">
            <span class="messageTitle">交易评价</span>
            <span class="messageTitle_2">Transaction evaluation</span>
            <span class="bottomTriangle"></span>
        </div>
        <div class="companyTransaction_details" v-loading="loading">
            <div class="TransactionNum">
                <div class="first">
                    <p class="TransactionNum_circle">好评</p>
                    <div class="TransactionNum_text">
                        <p class="text">@{{storeEvaluatesStore.avg_good}}%</p>
                        <p class="text1">平均好评率</p>
                    </div>
                </div>
                <div class="second">
                    <span class="TransactionNum_circle">评分</span>
                    <div class="TransactionNum_text">
                        <p class="text">@{{storeEvaluatesStore.avg_speed}}分</p>
                        <p class="text1">平均工作速度</p>
                    </div>
                    <div class="TransactionNum_text">
                        <p class="text">@{{storeEvaluatesStore.avg_quality}}分</p>
                        <p class="text1">平均工作质量</p>
                    </div>
                    <div class="TransactionNum_text">
                        <p class="text">@{{storeEvaluatesStore.avg_attitude}}分</p>
                        <p class="text1">平均工作态度</p>
                    </div>
                </div>
            </div>
            <div class="TransactionHeader">
                <div class="tsHeader">
                    <div :class="{active:evaluatesType==1}" @click="changeEvaluates(1)">
                        <img src="{{URL::asset('./img/store/well.png')}}" alt="">
                        <span>好评数<a>@{{storeEvaluatesStore.good}}</a></span>
                    </div>
                    <div :class="{active:evaluatesType==2}" @click="changeEvaluates(2)">
                        <img src="{{URL::asset('./img/store/middle.png')}}" alt="">
                        <span>中评数<a>@{{storeEvaluatesStore.middle}}</a></span>
                    </div>
                    <div :class="{active:evaluatesType==3}" @click="changeEvaluates(3)">
                        <img src="{{URL::asset('./img/store/bad.png')}}" alt="">
                        <span>差评数<a>@{{storeEvaluatesStore.bad}}</a></span>
                    </div>
                </div>
                <div class="tsMain">
                    <div v-for="item in storeEvaluatesList.data">
                        <span class="userMes">
                            <img :src="item.user_avatar">
                            <a>@{{item.user_name}}</a>
                        </span>
                        <span class="userEvaluate">
                            <span>
                                <span class="userMes_case">
                                    <!-- <span>业务名称业务名称业务名称</span> -->
                                    <i class="tri" v-for="it in item.average_star"></i>
                                    <a>（@{{item.average_star}}分）</a>
                                </span>
                                <span>@{{item.updated_at}}</span>
                            </span>
                            <span>@{{item.content}}</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="moreTransaction" @click="getEvaluatesMore">查看更多 ></div>

            <div class="editorEvaluates" v-loading="loading1">
                <span>请点击星星打分</span>
                <p>
            <span>工作速度
                <img v-for="(item,index) in workPac.T" @click="workPcT(index)" src="{{URL::asset('./img/store/xingxing.png')}}">
                <img v-for="(item,index) in workPac.F" @click="workPcF(index)" src="{{URL::asset('./img/store/huixing.png')}}">
            </span>
                    <span>工作质量
                <img v-for="(item,index) in workContent.T" @click="workContentT(index)" src="{{URL::asset('./img/store/xingxing.png')}}">
                <img v-for="(item,index) in workContent.F" @click="workContentF(index)" src="{{URL::asset('./img/store/huixing.png')}}">
            </span>
                    <span>工作态度
                <img v-for="(item,index) in workManner.T" @click="workMannerT(index)" src="{{URL::asset('./img/store/xingxing.png')}}">
                <img v-for="(item,index) in workManner.F" @click="workMannerF(index)" src="{{URL::asset('./img/store/huixing.png')}}">
            </span>
                </p>
                <textarea placeholder="请输入您的评价......" v-model="content"></textarea>
                <button @click="setEvaluates">发表评价</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
    
    $(() => {
        let store = new Vue({
            el: '#store',
            data: () => {
                return {
                    loading: false,
                    loading1: false,
                    storeDetailData: {},
                    storeId: getQueryString("id"),
                    storeDetails: {},
                    storeImg: [],
                    storeService: [],
                    storeCase: [],
                    storePartners: [],
                    storeEvaluates: [],
                    storeEvaluatesStore: [],
                    storeEvaluatesList: [],
                    evaluatesType: 1,
                    content: '',
                    workPac: {
                        T: 0,
                        F: 5,
                    },
                    workContent: {
                        T: 0,
                        F: 5,
                    },
                    workManner: {
                        T: 0,
                        F: 5,
                    }
                }
            },
            created() {
                this.storeDetailData = {
                    id: this.storeId
                }
                this.getStoreDetails(this.storeDetailData);
                this.getStroreImg(this.storeDetailData);
                this.getService(this.storeDetailData);
                this.getCase(this.storeDetailData);
                this.getPartners(this.storeDetailData);
                this.getEvaluates(this.storeDetailData);
            },
            mounted() {
                
            },
            methods: {
                getStoreDetails(storeDetailData) {
                    apiAjax("{{ route('home.store.storeDetailsApi')}}", 'get', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.storeDetails = res.data;
                        } else {}
                    }, (erro) => {});
                },
                getStroreImg(storeDetailData) {
                    apiAjax("{{ route('home.store.imageApi')}}", 'get', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.storeImg = res.data.image||[];
                        } else {}
                    }, (erro) => {});
                },
                getService(storeDetailData) {
                    apiAjax("{{ route('home.store.serviceApi')}}", 'get', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.storeService = res.data ||[];
                        } else {}
                    }, (erro) => {});
                },
                getServeMore(){
                    window.location.href = "{{route('home.store.storeService')}}?id=" + this.storeId
                },
                getServiceDetails(id) {
                    window.location.href = "{{ route('home.store.serviceDetails') }}?id=" + this.storeId + "&serviceId=" + id
                },
                getCase(storeDetailData) {
                    let a = JSON.parse(JSON.stringify(storeDetailData));
                    a['page'] = 1
                    apiAjax("{{ route('home.store.casesApi')}}", 'get', a, (res) => {
                        if (res.code == 0) {
                            this.storeCase = res.data.data||[];
                        } else {}
                    }, (erro) => {});
                },
                getCaseMore() {
                    window.location.href = "{{ route('home.store.storeCases') }}?id=" + this.storeId

                },
                getPartners(storeDetailData) {
                    apiAjax("{{ route('home.store.partnersApi')}}", 'get', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.storePartners = res.data.partners||[];
                            this.$nextTick(()=>{
                                var galleryThumbs = new Swiper('.swiper-container', {
                                spaceBetween: 10,
                                slidesPerView: 5,
                                loop: true,
                                autoplay:true,
                                autoplayDisableOnInteraction : false,
                                loopedSlides: 5,
                                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                                observeParents: true, //修改swiper的父元素时，自动初始化swiper
                            });
                            })
                        } else {}
                    }, (erro) => {});
                },
                getEvaluates(storeDetailData) {
                    this.loading = true;
                    let a = JSON.parse(JSON.stringify(storeDetailData));
                    a['type'] = this.evaluatesType;
                    a['page'] = 1;
                    apiAjax("{{ route('home.store.evaluatesList')}}", 'get', a, (res) => {
                        this.loading = false;

                        if (res.code == 0) {
                            this.storeEvaluatesStore = res.data.store;
                            this.storeEvaluatesList = res.data.list;
                        } else {}
                    }, (erro) => {
                        this.loading = false;

                    });
                },
                changeEvaluates(type) {
                    this.evaluatesType = type;
                    this.getEvaluates(this.storeDetailData);
                },
                getEvaluatesMore() {
                    window.location.href = "{{ route('home.store.storeEvaluates') }}?id=" + this.storeId

                },






                //工作速度
                workPcT(index) {
                    this.workPac.T = index + 1
                    this.workPac.F = 5 - this.workPac.T
                },
                workPcF(index) {
                    if (this.workPac.T != 0) {
                        this.workPac.T = this.workPac.T + index + 1
                    } else {
                        this.workPac.T = index + 1
                    }
                    this.workPac.F = 5 - this.workPac.T
                },
                //工作质量
                workContentT(index) {
                    this.workContent.T = index + 1
                    this.workContent.F = 5 - this.workContent.T
                },
                workContentF(index) {
                    if (this.workContent.T != 0) {
                        this.workContent.T = this.workContent.T + index + 1
                    } else {
                        this.workContent.T = index + 1
                    }
                    this.workContent.F = 5 - this.workContent.T
                },
                //工作态度
                workMannerT(index) {
                    this.workManner.T = index + 1
                    this.workManner.F = 5 - this.workManner.T
                },
                workMannerF(index) {
                    if (this.workManner.T != 0) {
                        this.workManner.T = this.workManner.T + index + 1
                    } else {
                        this.workManner.T = index + 1
                    }
                    this.workManner.F = 5 - this.workManner.T
                },
                // 评价供应商
                setEvaluates() {
                    if (!this.workPac.T > 0 || !this.workContent.T > 0 || !this.workManner.T > 0) {
                        this.$message({
                            message: "请点击星星打分",
                            type: 'warning'
                        });
                        return false;
                    } else {
                        this.loading1 = true;
                        let data = {
                            store_id: this.storeId,
                            content: this.content,
                            speed: this.workPac.T,
                            quality: this.workContent.T,
                            attitude: this.workManner.T
                        };
                        apiAjax("{{ route('home.store.storeEvaluatesApi')}}", 'post', data, (res) => {
                            this.loading1 = false;
                            if (res.code == 0) {
                                this.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                                this.reset();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                        }, (erro) => {
                            this.loading1 = false;
                        });
                    }
                },
                reset() {
                    this.content = "";
                    this.workPac = {
                        T: 0,
                        F: 5,
                    };
                    this.workContent = {
                        T: 0,
                        F: 5,
                    };
                    this.workManner = {
                        T: 0,
                        F: 5,
                    }
                },
            }
        })
    })
</script>
@endsection